<template>
  <div >
    <div style="width:100%;height:60px;padding: 0;margin: 0;background-color: #cccccc79;">
      <el-row style="margin: 0">
        <el-col :span="12">
          <div style="float: left;margin-left: 3px">
            <i  class="fa fa-podcast fa-2x" ></i>
            <span><i>UVA</i></span>
            <div><i>Manager</i></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="float: right;margin-right: 10px;text-align: center">
            <h2>人员管理</h2>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <hr>
  <div style="background-color: #cccccc79;padding: 10px">
    <el-table :data="userData" style="width: 100%;" stripe >
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="职位" prop="jobTitle" />
      <el-table-column label="联系方式" prop="phone" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small"
                     type="danger"
                     v-if="scope.row.permission===2"
                     @click="handleEdit(scope.$index, scope.row)"
          >赋予权限</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除用户</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        class="mt-4"
        v-model:page-count="pageCnt"
        v-model:current-page="crrntPage"
        @current-change="handleCurrentChange"
        style="text-align: center"
    />
  </div>

</template>

<script >
import request from "@/utils/request";
import { ElMessageBox ,ElMessage} from 'element-plus'
export default {
  name: "User",

  mounted() {
    this.getUser();
  },
  computed:{
    userData:{
      get(){
        return this.tableData;
      },
      set(data){
        this.tableData = data;
      }
    }
  },
  data(){
    return{
      search:"",
      tableData: [],
      pageCnt:0,
      crrntPage:1
    }
  },
  methods:{
    handleCurrentChange:function (page){
      request.get("/user/listByPage/"+page).
      then(res=>{
        if(res){
          console.log(res.data.userList.length);
          this.tableData = res.data.userList;
          this.pageCnt = res.data.pageCnt;
        }else {
          console.log("请求人员信息失败")
        }
      })
    },
    getUser:function (){
      request.get("/user/listByPage/1").
      then(res=>{
        if(res){
          console.log(res.data.userList.length);
          this.tableData = res.data.userList;
          this.pageCnt = res.data.pageCnt;
        }else {
          console.log("请求人员信息失败")
        }
      })
    },
     handleEdit : (index, row) => {
       console.log(index, row);
       ElMessageBox.confirm(
           '是否赋予该用户权限?',
           '警告',
           {
             confirmButtonText: '确认',
             cancelButtonText: '取消',
             type: 'warning',
           }
       ).then(() => {
         row.permission=1;
         request.post("/user/update/",row).then(res=>{
           ElMessage({
             type: 'success',
             message: res.data.msg,
           });
         });
         this.getUser();
         console.log(this.tableData);
         //this.tableData.slice(index,1);
       }).catch(() => {
         ElMessage({
           type: 'info',
           message: '取消',
         })
       })
    },
     handleDelete : function (index, row)  {
      console.log(index, row);
       ElMessageBox.confirm(
           '是否删除该用户?',
           '警告',
           {
             confirmButtonText: '确认',
             cancelButtonText: '取消',
             type: 'warning',
           }
       ).then(() => {
         request.get("/user/delete/"+row.id).then(res=>{
           ElMessage({
             type: 'success',
             message: res.data.msg,
           });
         });
         this.getUser();
         console.log(this.tableData);
         //this.tableData.slice(index,1);
       }).catch(() => {
         ElMessage({
           type: 'info',
           message: '删除取消',
         })
       })
    }
  },
}
</script>
